﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<!-- Meta -->
<meta name="description" content="旅游管理系统" />
<meta name="author" content="WY" />

<link rel="shortcut icon" th:href="@{/picture/favicon.ico}"
	type="image/x-icon" />
<title>旅游管理系统</title>

<!-- vendor css -->
<link th:href="@{/admin/css/font-awesome.css}" rel="stylesheet" />
<link th:href="@{/admin/css/ionicons.css}" rel="stylesheet" />
<link th:href="@{/admin/css/perfect-scrollbar.css}" rel="stylesheet" />
<link th:href="@{/admin/css/github.css}" rel="stylesheet" />
<link th:href="@{/admin/css/select2.min.css}" rel="stylesheet" />

<!-- Starlight CSS -->
<link rel="stylesheet" th:href="@{/admin/css/starlight.css}" />
</head>

<body>

	<!-- ########## START: LEFT PANEL ########## -->
	<div class="sl-logo">
		<a href=""><img th:src="@{/admin/picture/mt_logo_wh.jpg}"
			style="width: 30px; height: 30px;" /> <span style="font-size: 18px">旅游管理系统</span></a>
	</div>
	<div class="sl-sideleft">

		<label class="sidebar-label">导航栏</label>
		<div class="sl-sideleft-menu">
			<a href="#" class="sl-menu-link">
				<div class="sl-menu-item">
					<i class="menu-item-icon icon ion-ios-gear-outline tx-24"></i> <span
						class="menu-item-label">会员管理</span> <i
						class="menu-item-arrow fa fa-angle-down"></i>
				</div>
				<!-- menu-item -->
			</a>
			<!-- sl-menu-link -->
			<ul class="sl-menu-sub nav flex-column">
				<li class="nav-item"><a th:href="@{/root/findAllAdminByLevel}"
					class="nav-link">会员列表</a></li>
				<!-- <li class="nav-item"><a th:href="@{/root/addMember}"
					class="nav-link">会员添加</a></li>
				<li class="nav-item"><a th:href="@{/root/delMember}"
					class="nav-link">会员删除</a></li> -->
			</ul>
			<a href="#" class="sl-menu-link">
				<div class="sl-menu-item">
					<i class="menu-item-icon icon ion-ios-gear-outline tx-24"></i> <span
						class="menu-item-label">酒店管理</span> <i
						class="menu-item-arrow fa fa-angle-down"></i>
				</div>
				<!-- menu-item -->
			</a>
			<!-- sl-menu-link -->
			<ul class="sl-menu-sub nav flex-column">
				  <li class="nav-item"><a th:href="@{/root/findAllHotels}" class="nav-link">酒店列表</a></li>
				<li class="nav-item"><a th:href="@{/root/addHotel}"
					class="nav-link">酒店添加</a></li>
				<li class="nav-item"><a th:href="@{/root/delHotel}"
					class="nav-link">酒店删除</a></li>
			</ul>

		</div>
		<!-- navicon-right -->
	</div>
	<!-- sl-header-right -->
	</div>
	<!-- sl-header -->
	<!-- ########## END: HEAD PANEL ########## -->

	<!-- ########## START: RIGHT PANEL ########## -->

	<!-- ########## END: RIGHT PANEL ########## -->

	<!-- ########## START: MAIN PANEL ########## -->
	<div class="sl-mainpanel">
		<nav class="breadcrumb sl-breadcrumb">
			<a class="breadcrumb-item" href="index.html">旅游管理系统</a> <span
				class="breadcrumb-item active">新增管理员用户</span>
		</nav>

		<div class="sl-pagebody">
			<!-- <div class="sl-page-title">
          <h5>Form Layouts</h5>
          <p>Forms are used to collect user information with different element types of input, select, checkboxes, radios and more.</p>
        </div> -->
			<!-- sl-page-title -->

			<div class="card pd-20 pd-sm-40 form-layout form-layout-4">
				<h6 class="card-body-title">新增管理员用户</h6>
				<p class="mg-b-20 mg-sm-b-30">Add manager.</p>

				<form th:action="@{/root/updateMember}" method="post" id="addUserForm"
					onsubmit="return valiForm();">

					<!-- row -->
					<input type="hidden" name="adminid" th:value="${sysAdmin.adminId}">
					<div class="row mg-t-20">
						<label class="col-sm-1 form-control-label"> 酒店ID:<span
							class="tx-danger">*</span></label>
						<div class="col-sm-3 mg-t-10 mg-sm-t-0">
							<input type="text" class="form-control" name="hotelId" readonly="readonly"
								onblur="validateName()" th:value="${sysAdmin.hotelId}" /> <span
								class="col-sm-12 mt-t-10 mg-sm-t-0 form-control-label"
								style="color: red; font-size: 12px;" id="nameInfo" />
						</div>
					</div>
					<!-- row -->
					<div class="row mg-t-20">
						<label class="col-sm-1 form-control-label"> 手机号:<span
							class="tx-danger">*</span></label>
						<div class="col-sm-3 mg-t-10 mg-sm-t-0">
							<input type="text" class="form-control" name="phoneNumber" th:value="${sysAdmin.phoneNumber}"/>

						</div>
					</div>
					<!-- row -->
					<div class="row mg-t-20">
						<label class="col-sm-1 form-control-label"> 密码:<span
							class="tx-danger">*</span></label>
						<div class="col-sm-3 mg-t-10 mg-sm-t-0">
							<input type="password" class="form-control" name="password"
								onblur="validateAddress()"/> <span
								class="col-sm-12 mt-t-10 mg-sm-t-0 form-control-label"
								style="color: red; font-size: 12px;" id="assressInfo" />
						</div>
					</div>
					
					<div class="row mg-t-20">
						<label class="col-sm-1.5 form-control-label"> 管理员等级:<span
							class="tx-danger">*</span></label>
						<div class="col-sm-3 mg-t-10 mg-sm-t-0">
							<input type="text" class="form-control" name="level" readonly="readonly"
								onblur="validateAddress()" th:value="${sysAdmin.level}"/> <span
								class="col-sm-12 mt-t-10 mg-sm-t-0 form-control-label"
								style="color: red; font-size: 12px;" id="assressInfo" />
						</div>
					</div>
					
					<div class="form-layout-footer mg-t-30">
						<button class="btn btn-info mg-r-5" type="submit">确认修改</button>
						<button class="btn btn-secondary" type="reset">清&nbsp;&nbsp;&nbsp;&nbsp;空</button>
					</div>
					<!-- form-layout-footer -->
				</form>
			</div>
			<!-- card -->
		</div>
		<!-- sl-pagebody -->
		<footer class="sl-footer">
			<div class="footer-left">
				<div class="mg-b-2">Copyright &copy; 2018. 中原工学院信息商务学院. All
					Rights Reserved.</div>
			</div>
			<div class="footer-right d-flex align-items-center">Made by
				信息技术系.</div>
		</footer>
	</div>
	<!-- sl-mainpanel -->


	<!-- ########## END: MAIN PANEL ########## -->

	<script th:src="@{/admin/js/jquery.js}"></script>
	<script th:src="@{/admin/js/popper.js}"></script>
	<script th:src="@{/admin/js/bootstrap.js}"></script>
	<script th:src="@{/admin/js/jquery-ui.js}"></script>
	<script th:src="@{/admin/js/perfect-scrollbar.jquery.js}"></script>
	<script th:src="@{/admin/js/highlight.pack.js}"></script>
	<script th:src="@{/admin/js/select2.min.js}"></script>
	<script th:src="@{/admin/js/jquery.md5.js}"></script>
	<script th:src="@{/admin/js/starlight.js}"></script>

	<script>
		$(function() {
			'use strict';

			$('.select2').select2({
				minimumResultsForSearch : Infinity
			});

			// Select2 by showing the search
			$('.select2-show-search').select2({
				minimumResultsForSearch : ''
			});

			$('.select3').select2({
				minimumResultsForSearch : Infinity
			});

			$('.select3-show-search').select3({
				minimumResultsForSearch : ''
			});

			// Select2 with tagging support
			$('.select2-tag').select2({
				tags : true,
				tokenSeparators : [ ',', ' ' ]
			});

			// Datepicker
			$('.fc-datepicker').datepicker({
				showOtherMonths : true,
				shouOtherYear : true,
				selectOterYear : true,
				selectOtherMonths : true
			});

		});
	</script>

	<script th:inline="javascript">
		/*<![CDATA[*/

		// 验证酒店编号不为空
		function validateHotelId() {
			var hotelId = $('input[name="hotelId"]');
			var hotelInfo = $("#hotelInfo");
			hotelInfo.html("");
			if (hotelId.val() == null || ($.trim(hotelId.val())) == "") {
				hotelInfo.html("酒店编号不能为空！");
				hotelId.addClass("is-invalid");
				return false;
			} else {
				hotelId.removeClass("is-invalid");
			}
			return true;
		}

		// 验证用户名是否为空
		function validateName() {
			var name = $('input[name="name"]');
			var nameInfo = $("#nameInfo");
			nameInfo.html("");
			if (name.val() == null || ($.trim(name.val())) == "") {
				nameInfo.html("客户姓名不能为空！");
				name.addClass("is-invalid");
				return false;
			} else {
				name.removeClass("is-invalid");
			}
			return true;
		}

		// 验证密码
		function valiPwd() {
			var pwd = $("#pwd");
			var password = $.md5(pwd.val());
			var pwdInfo = $("#pwdInfo");
			pwdInfo.html("");
			if (pwd.val() == null || ($.trim(pwd.val())) == "") {
				pwdInfo.html("用户密码不能为空！");
				pwd.addClass("is-invalid");
				$("#pwdInfo").css('display', 'block');
				return false;
			} else if (pwd.val().trim().length < 6) {
				pwdInfo.html("用户密码不能低于6位！");
				$("#pwdInfo").css('display', 'block');
				pwd.addClass("is-invalid");
				return false;
			} else {
				$('input[name="password"]').val(password);
				pwd.removeClass("is-invalid");
			}
			return true;
		}

		// 验证确认密码
		function valiRePwd() {
			var pwd = $("#pwd");
			var Repwd = $("#repwd");
			var repassword = $.md5(Repwd.val());
			var RepwdInfo = $("#RepwdInfo");
			RepwdInfo.html("");
			if (Repwd.val() == null || ($.trim(Repwd.val())) == "") {
				RepwdInfo.html("用户密码不能为空！");
				Repwd.addClass("is-invalid");
				$("#RepwdInfo").css('display', 'block');
				return false;
			} else if (Repwd.val() != pwd.val()) {
				RepwdInfo.html("两次输入密码不一致！");
				$("#RepwdInfo").css('display', 'block');
				Repwd.addClass("is-invalid");
				return false;
			} else if (Repwd.val().trim().length < 6) {
				RepwdInfo.html("用户密码不能低于6位！");
				$("#RepwdInfo").css('display', 'block');
				Repwd.addClass("is-invalid");
				return false;
			} else {
				$('input[name="repeatPassword"]').val(repassword);
				Repwd.removeClass("is-invalid");
			}
			return true;
		}

		// 验证客户手机号
		function validatePhone() {
			var phone = $('input[name="mobilePhone"]');
			var phoneInfo = $("#phoneInfo");
			var pattern = /^1[34578]\d{9}$/;
			phoneInfo.html("");
			if ((phone.val() == null || ($.trim(phone.val())) == "")) {
				phoneInfo.html("客户联系方式不能为空！");
				phone.addClass("is-invalid");
				return false;
			} else if (!(pattern.test(phone.val().toString()))) {
				phoneInfo.html("用户手机号格式不正确！");
				phone.addClass("is-invalid");
				return false;
			} else {
				phone.removeClass("is-invalid");
			}
			return true;
		}

		function valiForm() {
			if (validateName() && validatePhone() && valiPwd() && valiRePwd()
					&& valiCc()) {
				return true;
			} else {
				validateName();
				validatePhone();
				valiCc();
				valiPwd();
				valiRePwd()
				return false;
			}
		}

		/*]]>*/
	</script>
</body>
</html>
